<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/page/layout/layout.xhtml" 
                xmlns="http://www.w3.org/1999/xhtml" 
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core">

    <ui:define name="title">Login</ui:define>
    <ui:define name="content">        
        <h:form>

            <p:growl id="growl" sticky="true" showDetail="true"/>

            <p:wizard widgetVar="wiz" showNavBar="true" nextLabel="Siguiente" backLabel="Anterior"  
                      id="wizardOffre">
                <p:tab id="personal" title="Datos Personales">
                    <p:panel header="Detalles Datos Personales">
                        
                        <h:panelGrid columns="2" columnClasses="label, value">

                            <h:outputText value="Nombre: " />
                            <p:inputText value="#{altaSocioBean.socio.nombre}" required="true" label="Firstname"/>

                            <h:outputText value="Apellidos: " />
                            <p:inputText value="#{altaSocioBean.socio.apellidos}" required="true" label="Lastname"/>

                            <h:outputText value="DNI: " />
                            <p:inputText value="#{altaSocioBean.socio.dni}" />

                            <h:outputText value="Teléfono: " />
                            <p:inputText value="#{altaSocioBean.socio.telefono}" />

                            <h:outputText value="Email: " />
                            <p:inputText value="#{altaSocioBean.socio.email}" />

                        </h:panelGrid>
                    </p:panel>
                </p:tab>

                <p:tab id="direccion" title="Direccion">
                    <p:panel header="Detalles de la Dirección">
                        
                        <h:panelGrid columns="2" columnClasses="label, value">


                            <h:outputText value="Calle: " />
                            <p:inputText value="#{altaSocioBean.socio.calle}" />

                            <h:outputText value="Numero: " />
                            <p:inputText value="#{altaSocioBean.socio.numero}" />

                        </h:panelGrid>
                    </p:panel>
                </p:tab>

                <p:tab id="club" title="Moto">
                    <p:panel header="Datos de la Moto">
                        
                        <h:panelGrid columns="2" columnClasses="label, value">
                            <h:outputText value="Marca: *" />
                            <p:inputText value="#{altaSocioBean.moto.marca}" required="true" label="Email"/>

                            <h:outputText value="Modelo: " />
                            <p:inputText value="#{altaSocioBean.moto.modelo}"/>

                            <h:outputText value="Color: " />
                            <p:inputText value="#{altaSocioBean.moto.color}"/>

                            <h:outputText value="Año: " />
                            <p:inputText value="#{altaSocioBean.moto.anio}"/>

                        </h:panelGrid>
                    </p:panel>
                </p:tab>

                <p:tab id="registro" title="Socio">
                    <p:panel header="Datos de Registro">
                        
                        <h:panelGrid columns="2" columnClasses="label, value">
                            <h:outputText value="Nick: " />
                            <p:inputText value="#{altaSocioBean.registro.nick}" required="true" label="Email" />

                            <h:outputText value="Contraseña: " />
                            <p:inputText value="#{altaSocioBean.registro.passwd}" />                            

                        </h:panelGrid>
                    </p:panel>
                </p:tab>

                <p:tab id="confirm" title="Confirmar Datos">
                    <p:panel header="Confirmación">
                        <h:panelGrid id="confirmation" columns="3" columnClasses="grid,grid,grid">
                            <h:panelGrid columns="2" columnClasses="label, value">
                                <h:outputText value="Nombre: " />
                                <h:outputText value="#{altaSocioBean.socio.nombre}" styleClass="outputLabel"/>

                                <h:outputText value="Apellidos: " />
                                <h:outputText value="#{altaSocioBean.socio.apellidos}" styleClass="outputLabel"/>

                                <h:outputText value="DNI: " />
                                <h:outputText value="#{altaSocioBean.socio.dni}" styleClass="outputLabel"/>

                                <h:outputText value="Teléfono: " />
                                <h:outputText value="#{altaSocioBean.socio.telefono}" styleClass="outputLabel"/>

                                <h:outputText value="Email: " />
                                <h:outputText value="#{altaSocioBean.socio.email}" styleClass="outputLabel"/>
                            </h:panelGrid>

                            <h:panelGrid columns="2" columnClasses="label, value">
                                <h:outputText value="Calle: " />
                                <h:outputText value="#{altaSocioBean.socio.calle}" styleClass="outputLabel"/>

                                <h:outputText value="Número: " />
                                <h:outputText value="#{altaSocioBean.socio.numero}" styleClass="outputLabel"/>

                                <h:outputText value="Población: " />
                                <h:outputText value="#{altaSocioBean.socio.poblacion}" styleClass="outputLabel"/>

                                <h:outputText value="Ciudad: " />
                                <h:outputText value="#{altaSocioBean.socio.ciudad}" styleClass="outputLabel"/>

                                <h:outputText value="Comunidad Autónoma: " />
                                <h:outputText value="#{altaSocioBean.socio.CAutonoma}" styleClass="outputLabel"/>

                                <h:outputText value="Pais: " />
                                <h:outputText value="#{altaSocioBean.socio.pais}" styleClass="outputLabel"/>
                            </h:panelGrid>

                            <h:panelGrid columns="2" columnClasses="label, value">
                                <h:outputText value="Marca: " />
                                <h:outputText value="#{altaSocioBean.moto.marca}" styleClass="outputLabel"/>

                                <h:outputText value="Modelo: " />
                                <h:outputText value="#{altaSocioBean.moto.modelo}" styleClass="outputLabel"/>

                                <h:outputText value="Color: " />
                                <h:outputText value="#{altaSocioBean.moto.color}" styleClass="outputLabel"/>

                                <h:outputText value="Año: " />
                                <h:outputText value="#{altaSocioBean.moto.anio}" styleClass="outputLabel"/>

                                <h:outputText />
                                <h:outputText />
                            </h:panelGrid>

                            <h:panelGrid columns="2" columnClasses="label, value">
                                <h:outputText value="Nick: " />
                                <h:outputText value="#{altaSocioBean.registro.nick}" styleClass="outputLabel"/>

                                <h:outputText value="Rango: " />
                                <h:outputText value="#{altaSocioBean.socio.rango}" styleClass="outputLabel"/>
                                
                            </h:panelGrid>
                        </h:panelGrid>

                        <p:commandButton value="Submit" actionListener="#{altaSocioBean.save()}" update="growl" process="@this"/>
                    </p:panel>
                </p:tab>                
            </p:wizard>
        </h:form>       
    </ui:define>
</ui:composition>
